<template>
    <el-row class="row">
        <el-col :span="16" class="col-left">
            <div>
                <h1 class="hh">欢迎光临</h1>
                <span class="newsparn">欢迎来到登录页面</span>
            </div>
        </el-col>
        <el-col :span="8" style="background-color: aliceblue">
            <div class="delu" :model="form">
                <h2>欢迎回来</h2>
                <div>账号密码登录</div>
                <el-form ref="forRef">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username" placeholder="请输入用户名" />
                        <template>
                            <el-icon>
                                <user />
                            </el-icon>
                        </template>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="form.password" placeholder="请输入密码" show-password />
                        <template>
                            <el-icon>
                                <lock />
                            </el-icon>
                        </template>
                    </el-form-item>
                    <el-form-item>
                        <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onSubmit">登 录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>
<script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import { login, getinfo } from "../api/manager";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import { useStore } from "vuex"
import { toast } from "../composables/util"
// import { useCookies } from "@vueuse/integrations/useCookies";
import { setToken } from "../composables/auth";
const store = useStore()
const router = useRouter();
const form = reactive({
    username: "",
    password: "",
});
const forRef = ref(null);
const rules = {
    username: [
        {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
        },
        {
            min: 3,
            max: 5,
            message: "用户名长度必须是3-5个字符",
            trigger: "blur",
        },
    ],
    password: [
        {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
        },
    ],
};
const onSubmit = () => {
    store.dispatch("login", form).then(res => {
        toast("登录成功")
        router.push("/")
    })
    //   forRef.value.validate((valid) => {
    //     if (!valid) {
    //       return false;
    //     }
    //   登录成功后要做三件事情，1.提示登录成功，2. 跳转到首页，3.存储cooke
    // login(form.username, form.password)
    //     .then((res) => {
    //         ElNotification({
    //             message: "登录成功",
    //             type: "success",
    //             duration: 3000,
    //         });
    //登录成功将token存储到cookie中
    //   const cookies = useCookies();
    //   cookies.set("admin-token", res.token);
    // setToken(res.token);
    //   登录成功跳转到首页
    // router.push("/");
    //获取到用户相关信息
    // getinfo().then((res) => {
    //     store.commit("SET_USERINFO", res)
    //     console.log(res);
    // });
    // })
    // .catch((err) => {
    // console.log(err);
    //   这部分的提示可以放在请求拦截里面
    // ElNotification({
    // message: err.response.data.msg || "登录失败",
    // type: "error",
    // duration: 3000,
    // });
    // });
    //   });
};
//监听回车事件
function onKeyUp(e) {
    if (e.key == "Enter") onSubmit()
}
//添加键盘监听
onMounted(() => {
    document.addEventListener("keyup", onKeyUp)
})
//移除键盘监听
onBeforeUnmount(() => {
    document.addEventListener("keyup", onkeyup)
})
</script>
<style>
.row {
    background-color: aqua;
    min-width: 100vh;
    min-height: 100vh;
}

.col-left {
    display: flex;
    /* 在主轴方向上居中 */
    justify-content: center;
    /* 在辅助轴上面水平居中 */
    align-items: center;
}

.hh {
    font-size: large;
    font-weight: 800;
}

.newsparn {
    display: block;
}

.delu {
    display: flex;
    /* 在主轴方向上居中 */
    justify-content: center;
    /* 在辅助轴上面水平居中 */
    align-items: center;
    flex-direction: column;
}
</style>
